<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>考勤记录异常申诉表</title>
    <link rel="stylesheet" href="./index.css" />
    <style>
      #abnormal {
        height: 100%;
        background-color: #f5f5f5;
      }
    </style>
  </head>

  <body>
    <div id="abnormal">
      <van-form @submit="onSubmit" style="margin-bottom: 200px">
        <div>考勤记录异常申诉表</div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-cell-group>
              <van-field label="申请人" value="输入框只读" readonly />
            </van-cell-group>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-cell-group>
              <van-field label="部门/单位" value="输入框只读" readonly />
            </van-cell-group>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <div>
              <van-field
                readonly
                clickable
                required
                name="datetimePicker"
                :value="abnormalDate"
                label="异常日期"
                placeholder="点击选择异常日期"
                @click="showPopup('4')"
                :rules="[{ required: true, message: '请选择异常日期' }]"
              />
            </div>
            <div>
              <van-field
                readonly
                clickable
                required
                name="datetimePicker"
                :value="startTime"
                label="异常开始时间"
                placeholder="点击选择异常开始时间"
                @click="showPopup('2')"
                :rules="[{ required: true, message: '请选择异常开始时间' }]"
              />
            </div>
            <div>
              <van-field
                readonly
                clickable
                required
                name="datetimePicker"
                :value="endTime"
                label="异常截止时间"
                placeholder="点击选择异常截止时间"
                @click="showPopup('3')"
                :rules="[{ required: true, message: '请选择异常截止时间' }]"
              />
            </div>
          </div>
        </div>
        <div style="padding: 10px">
          <div style="background-color: #fff; border-radius: 5px">
            <van-field name="radio" required label="事由">
              <template #input>
                <van-radio-group v-model="radio" direction="horizontal">
                  <van-radio name="1">忘记打卡</van-radio>
                  <van-radio name="2">忘记带卡</van-radio>
                  <van-radio name="3">严重交通堵塞</van-radio>
                  <van-radio name="4">外出公干表已汇总</van-radio>
                </van-radio-group>
              </template>
            </van-field>
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="
              background-color: #fff;
              padding: 10px;
              border-radius: 5px;
              color: red;
            "
          >
            <p>***公司将定期抽查，发现虚报滥用的将给予内部通报等处理</p>
            <p>
              1.忘记打卡：上、下班忘记打卡，请附上当天发过的电邮记录以作证明。
            </p>
            <p>
              2.忘记带卡：请进入公司后，第一时间发电邮给部门考勤员和人力资源部考勤员通知上班时间，下班离开公司时也需要通知。申请考勤申诉表时，请附上已发给考勤员的上、下班时间的证明电邮。
            </p>
            <p>
              3.严重交通堵塞：如因上班途中遭遇黄色暴雨、三号台风、交通事故等引起的严重交通堵塞，请自行提供相关证明材料如新闻报道等备查。
            </p>
            <p>4.外出公干表已汇总。</p>
            <p></p>
            <p></p>
          </div>
        </div>

        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 10px; border-radius: 5px"
          >
            <div style="font-size: 14px; color: #323233">
              <span style="color: red">*</span>备注
            </div>
            <van-field
              v-model="remark"
              rows="3"
              autosize
              type="textarea"
              placeholder="请输入备注"
              :rules="[{ required: true, message: '请输入备注' }]"
            />
          </div>
        </div>
        <div style="padding: 10px">
          <div
            style="background-color: #fff; padding: 0 px; border-radius: 5px"
          >
            <van-cell title="附件">
              <template #right-icon>
                <van-uploader>
                  <van-icon name="plus" />
                </van-uploader>
              </template>
            </van-cell>
            <p style="color: red; padding-left: 10px">*（必须上传相关附件）</p>
          </div>
        </div>
        <!-- <div style="margin: 16px; margin-bottom: 200px">
          <van-button round block type="info" native-type="submit"
            >提交</van-button
          >
        </div> -->
      </van-form>
      <div
        style="
          position: fixed;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 15px;
          background-color: white;
          box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
          z-index: 1000;
        "
      >
        <van-button
          type="primary"
          block
          @click="onHold"
          style="margin-bottom: 10px"
        >
          暂存</van-button
        >
        <van-button type="danger" block @click="onSubmitApproval ">
          提交审批</van-button
        >
      </div>
      <van-popup position="bottom" v-model="show">
        <div v-if="popupType === '2'">
          <van-datetime-picker
            :value="startTime"
            type="time"
            @confirm="onPickerConfirm"
            @cancel="onCancel"
          />
        </div>
        <div v-else-if="popupType === '3'">
          <van-datetime-picker
            :value="endTime"
            type="time"
            @confirm="onPickerConfirm"
            @cancel="onCancel"
          />
        </div>
        <div v-else-if="popupType === '4'">
          <van-datetime-picker
            :value="abnormalDate"
            type="date"
            title="选择年月日"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="onPickerConfirm"
            @cancel="onCancel"
          />
        </div>
      </van-popup>
    </div>
  </body>
  <script src="./vue.min.js"></script>
  <script src="./vant.min.js"></script>
  <script>
    var abnormal = new Vue({
      el: "#abnormal",
      data() {
        const now = new Date();
        const minDate = new Date(now);
        minDate.setFullYear(now.getFullYear() - 1);
        const maxDate = new Date(now);
        maxDate.setFullYear(now.getFullYear() + 1);
        return {
          box: "",
          place: "",
          show: false,
          popupType: "",
          startTime: "", // 组件默认时间设置 今天请假开始时间
          endTime: "", // 组件默认时间设置 今天请假结束时间
          abnormalDate: "", // 异常日期
          minDate, // 去年今日
          maxDate, // 明年今日
          textValue: "", // 请假事由
          radio: "", // 单选框
          remark: "", // 备注
          list: [
            { id: 1, name: "订单A", desc: "2025-10-23 14:30" },
            { id: 2, name: "订单B", desc: "2025-10-23 15:20" },
          ],
        };
      },
      computed: {},
      created() {},
      mounted() {},
      methods: {
        showPopup(value) {
          //  点击打开弹出层
          this.popupType = value;
          this.show = true;
        },
        onPickerConfirm(value) {
          console.log("点击确认选择日期", this.popupType, value);

          //  点击确认选择日期
          if (this.popupType === "2") {
            // this.startTime = this.startTime;
            this.startTime = value;
          } else if (this.popupType === "3") {
            // this.endTime = this.formatDate(this.endTime);
            this.endTime = value;
          } else if (this.popupType === "4") {
            console.log("4444");
            this.abnormalDate = this.formatDatess(value);
          }
          if (this.startTime && this.endTime) {
            console.log("都有值");
            const result = this.isTime1EarlierThanTime2(
              this.startTime,
              this.endTime
            );
            console.log(result);
            if (!result) {
              this.onCancel();
              this.$toast("出差结束时间不能早于出差开始时间");
            }
          }
          this.show = false;
        },
        onCancel() {
          // 点击取消选择日期
          if (this.popupType === "2") {
            this.startTime = "";
          } else if (this.popupType === "3") {
            this.endTime = "";
          } else if (this.popupType === "4") {
            this.abnormalDate = "";
          }

          this.show = false;
        },
        formatDate(date) {
          // 格式化日期为 YYYY-MM-DD HH:mm 格式
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, "0");
          const day = String(date.getDate()).padStart(2, "0");
          const hours = String(date.getHours()).padStart(2, "0");
          const minutes = String(date.getMinutes()).padStart(2, "0");
          return `${year}-${month}-${day} ${hours}:${minutes}`;
        },
        formatDatess(date) {
          // 格式化日期为 YYYY-MM-DD 格式
          const year = date.getFullYear();
          const month = String(date.getMonth() + 1).padStart(2, "0"); // 月份从0开始
          const day = String(date.getDate()).padStart(2, "0");
          return `${year}-${month}-${day}`;
        },
        isTime1EarlierThanTime2(time1, time2) {
          const [h1, m1] = time1.split(":").map(Number);
          const [h2, m2] = time2.split(":").map(Number);
          const t1 = h1 * 60 + m1;
          const t2 = h2 * 60 + m2;
          return t1 < t2;
        },
        onSubmit(values) {
          console.log("submit", values);
        },
        checkout() {
          // 判断每个都都有没值
          if (!this.abnormalDate) {
            this.$toast("请选择异常日期");
            return false;
          }
          if (!this.startTime) {
            this.$toast("请选择异常开始时间");
            return false;
          }
          if (!this.endTime) {
            this.$toast("请选择异常截止时间");
            return false;
          }
          if (!this.radio) {
            this.$toast("请选择异常事由");
            return false;
          }
          if (!this.remark) {
            this.$toast("请填写备注");
            return false;
          }
          return true;
        },
        onHold() {
          // 暂存
          if (!this.checkout()) {
            return;
          }
          console.log("暂存");
          console.log(this.abnormalDate);
          console.log(this.startTime);
          console.log(this.endTime);
          console.log(this.radio);
          console.log(this.remark);
        },
        onSubmitApproval() {
          // 提交审批
          if (!this.checkout()) {
            return;
          }
          console.log("提交审批");
        },
      },
    });
  </script>
</html>
